<template>
  <el-row>
    <el-col :span="24">
      <el-input placeholder="请输入图片名称" v-model.trim="queryList.keyword" class="input-w" size="small" clearable />
      <el-select
              placeholder="选择画幅类型"
              v-model="queryList.layout"
              clearable
              @change="handlerFilter"
              class="select-w ml10" size="small">
        <el-option
                v-for="layout in layoutList"
                :key="layout.layoutid"
                :label="layout.layoutname"
                :value="layout.layoutid"
        ></el-option>
      </el-select>
      <el-select
              placeholder="全部部门"
              v-model="queryList.groupid"
              clearable
              @change="handlerFilter"
              class="select-w ml10 mr10" size="small">
        <el-option v-for="group in groupList"
                   :key="group.groupid"
                   :label="group.name"
                   :value="group.groupid"
        ></el-option>
      </el-select>
      <el-button type="primary" size="small" @click="handlerFilter">
        <el-icon>
          <search />
        </el-icon>
        搜索
      </el-button>
    </el-col>
    <el-col :span="24" class="mt10">
      <el-table
              ref="imageMediumTableRef"
              :data="tableData.listData"
              v-loading="isloading"
              border
              max-height="350px"
              @row-click="handleClickRow"
              @select="handleSelect"
              @select-all="handleSelectAll"
      >
        <el-table-column type="selection" width="50" align="center" :selectable="handleSelectable" v-if="selectType == 'checkbox'" />
        <el-table-column width="50" align="center" v-else>
          <template #default="{row}">
            <span @click.stop>
              <el-radio
                      :label="row.imgid"
                      v-model="selectedRadioIndex"
                      @change="handleChangeRadio(row)"
              ><span></span></el-radio>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="预览" width="60" align="center">
          <template #default="{row, $index}">
            <span @click.stop>
              <el-image
                      :preview-src-list="srcList"
                      :initial-index="$index"
                      :src="getImageUrl(row, 2)"
              />
            </span>
          </template>
        </el-table-column>
        <el-table-column label="介质名称" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="介质来源">
          <template #default="{row}">
            {{sourceFromList[row.sourcefrom]}}
          </template>
        </el-table-column>
        <el-table-column label="图片大小">
          <template #default="{row}">
            <span v-if="row.extends && row.extends.size">{{formatSize(row.extends.size)}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="分辨率">
          <template #default="{row}">
            <span v-if="row.extends && row.extends.width && row.extends.height">{{row.extends.width + ' * ' + row.extends.height}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="画幅类型">
          <template #default="{row}">
            {{getLayoutName(row.layout)}}
          </template>
        </el-table-column>
        <el-table-column label="所属部门">
          <template #default="{row}">
            {{groupsOptions[row.groupid]}}
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" class="mt10">
      <table-pagination
              :queryList="queryList"
              :total="tableData.total"
              @pagination="getDataList"
      />
    </el-col>
  </el-row>
</template>

<script>
  import {reactive, ref, toRef, nextTick} from 'vue'
  import {getImages} from "@/api/media/image";
  import {getImageUrl, sourceFromList, formatSize, getLayoutName, layoutList} from "@/utils/usage-config";
  import {getSubRefGroup} from "@/api/group";
  import { Search } from "@element-plus/icons"
  import TablePagination from "@/views/public/TablePagination";
  import {getMediaRefImage, getSeriesRelImages} from "@/api/media/media";
  import {getPackageReledImgids} from "@/api/package/material";

  export default {
    name: "ImageMedium",
    components: {Search, TablePagination},
    props: {
      formData: {
        type: Object
      },
      mediaType: {
        type: String,
        default: 'media'
      },
      relAction: {
        type: String,
        default: 'relmedium'
      },
      selectType: {
        type: String,
        default: 'checkbox'
      }
    },
    setup(props) {
      const imageFormData = toRef(props, 'formData')
      const queryList = reactive({
        page: 1,
        pagesize: 25,
        isself: undefined,
        layout: '',
        groupid: undefined,
        keyword: ''
      })
      const isloading = ref(false)
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const srcList = ref([])
      const groupList = ref([])
      const groupsOptions = reactive({})
      const imageMediumTableRef = ref(null)
      const selectedImgIds = ref([])
      const selectedRadioIndex = ref(undefined)

      /** 获取部门列表 **/
      const getGroupDataList = () => {
        getSubRefGroup().then(response => {
          groupList.value = response.data
          response.data.forEach(group => {
            groupsOptions[group.groupid] = group.name
          })
        })
      }
      /** 获取图片列表 **/
      const getDataList = () => {
        selectedRadioIndex.value = undefined
        isloading.value = true
        getImages(queryList).then(response => {
          isloading.value = false
          const {total, list} = response.data
          tableData.total = total
          tableData.listData = list
          srcList.value = []
          nextTick(() => {
            tableData.listData.forEach(row => {
              srcList.value.push(getImageUrl(row, 1))
              if (selectedImgIds.value.includes(row.imgid)) {
                imageMediumTableRef.value.toggleRowSelection(row, true)
              }
            })
          })
        })
      }
      /** 搜索图片 **/
      const handlerFilter = () => {
        queryList.page = 1
        getDataList()
      }
      /** 点击行选择 **/
      const handleClickRow = (row) => {
        selectedRadioIndex.value = row.imgid
        if (!selectedImgIds.value.includes(row.imgid)) {
          handleGetSelectedImgIds(row)
        }
      }
      /** 单选 **/
      const handleSelect = (section, row) => {
        handleGetSelectedImgIds(row)
      }
      /** 多选 **/
      const handleSelectAll = (selection) => {
        if (selection.length > 0) {
          selection.forEach(row => {
            if (!imageFormData.value.datas.includes(row.imgid)) {
              imageFormData.value.datas.push(row.imgid)
            }
          })
        } else {
          imageFormData.value.datas = []
        }
      }
      /** 获取选择的图片ID **/
      const handleGetSelectedImgIds = (row) => {
        if (props.selectType == 'checkbox') {
          if (imageFormData.value.datas.includes(row.imgid)) {
            const index = imageFormData.value.datas.findIndex(d => d == row.imgid)
            imageFormData.value.datas.splice(index, 1)
            imageMediumTableRef.value.toggleRowSelection(row, false)
          } else {
            imageFormData.value.datas.push(row.imgid)
            imageMediumTableRef.value.toggleRowSelection(row, true)
          }
        } else {
          imageFormData.value.datas = [row.imgid]
        }
      }
      const handleChangeRadio = (row) => {
        selectedRadioIndex.value = row.imgid
        imageFormData.value.datas = [row.imgid]
      }
      /** 获取已关联的图片ID **/
      const handleGetReledImgids = () => {
        if (props.mediaType == 'media') {
          getMediaRefImage({mediaid: imageFormData.value.mediaid}).then(response => {
            selectedImgIds.value = response.data
          })
        } else if (props.mediaType == 'series') {
          getSeriesRelImages({seriesid: imageFormData.value.seriesid}).then(response => {
            selectedImgIds.value = response.data
          })
        } else if(props.mediaType == 'package') {
          getPackageReledImgids({packageid: imageFormData.value.packageid}).then(response => {
            selectedImgIds.value = response.data
          })
        }
      }
      /** 判断图片是否可选 **/
      const handleSelectable = (row) => {
        return !selectedImgIds.value.includes(row.imgid)
      }
      /** 初始化 **/
      const init = () => {
        if (props.relAction == 'relmedium') {
          handleGetReledImgids()
        }
        getGroupDataList()
        getDataList()
      }

      return {
        queryList,
        isloading,
        groupList,
        groupsOptions,
        tableData,
        getDataList,
        srcList,
        getImageUrl,
        sourceFromList,
        formatSize,
        getLayoutName,
        layoutList,
        handlerFilter,
        handleClickRow,
        handleSelect,
        handleSelectAll,
        imageMediumTableRef,
        handleSelectable,
        selectedRadioIndex,
        handleChangeRadio,
        init
      }
    }
  }
</script>

<style scoped>

</style>
